<nz-layout class="editor-layout">
  <nz-header class="header">
    <i nz-icon class="btn" nzType="save" title="保存" (click)="onSave()"></i>
    <!--    <i nz-icon class="btn" nzType="export" title="导出"></i>-->
    <!--    <nz-divider nzType="vertical"></nz-divider>-->
    <!--    <i nz-icon class="btn" nzType="undo" title="撤销"></i>-->
    <!--    <i nz-icon class="btn" nzType="redo" title="重做"></i>-->
    <nz-divider nzType="vertical"></nz-divider>
    <i nz-icon class="btn" nzType="scissor" title="剪切" (click)="onCut()"></i>
    <i nz-icon class="btn" nzType="copy" title="复制" (click)="onCopy()"></i>
    <i nz-icon class="btn" nzType="snippets" title="粘贴" (click)="onPaste()"></i>
    <i nz-icon class="btn" nzType="delete" title="删除" (click)="onDelete()"></i>
    <!--    <nz-divider nzType="vertical"></nz-divider>-->
    <!--    <i nz-icon class="btn" nzType="align-left" title="左对齐"></i>-->
    <!--    <i nz-icon class="btn" nzType="align-center" title="居中对齐"></i>-->
    <!--    <i nz-icon class="btn" nzType="align-right" title="右对齐"></i>-->
    <!--    <nz-divider nzType="vertical"></nz-divider>-->
    <!--    <i nz-icon class="btn" nzType="vertical-align-top" title="上对齐"></i>-->
    <!--    <i nz-icon class="btn" nzType="vertical-align-middle" title="居中对齐"></i>-->
    <!--    <i nz-icon class="btn" nzType="vertical-align-bottom" title="下对齐"></i>-->
    <nz-divider nzType="vertical"></nz-divider>
    <i nz-icon class="btn" nzType="vertical-right" title="置顶" [nzRotate]="90" (click)="moveTop()"></i>
    <i nz-icon class="btn" nzType="up" title="上移一层" (click)="moveUp()"></i>
    <i nz-icon class="btn" nzType="down" title="下移一层" (click)="moveDown()"></i>
    <i nz-icon class="btn" nzType="vertical-left" title="置底" [nzRotate]="90" (click)="moveBottom()"></i>
    <!--    <nz-divider nzType="vertical"></nz-divider>-->
    <!--    <i nz-icon class="btn" nzType="group" title="组合"></i>-->
    <!--    <i nz-icon class="btn" nzType="ungroup" title="解除组合"></i>-->

  </nz-header>
  <nz-layout>
    <nz-sider>
      <nz-collapse>
        <nz-collapse-panel *ngFor="let group of groupedComponents"
                           [nzHeader]="group.name" nzActive>
          <img class="component" *ngFor="let c of group.components" (click)="drawBegin(c)"
               [title]="c.name"
               [src]="c.icon">
        </nz-collapse-panel>
      </nz-collapse>
    </nz-sider>

    <nz-content class="content">
      <div id="hmi-editor-canvas"></div>
    </nz-content>

    <nz-sider class="properties" nzWidth="300px">


      <nz-collapse>
        <nz-collapse-panel nzHeader="参数配置" nzActive>

          <table>
            <tbody>
            <tr *ngFor="let prop of $properties">
              <td>{{prop.label}}</td>
              <td [ngSwitch]="prop.type">
                <nz-switch *ngSwitchCase="'boolean'" nzSize="small"
                           [(ngModel)]="properties[prop.name]"
                           (ngModelChange)="onPropertyChange(prop.name)"></nz-switch>
                <input nz-input *ngSwitchCase="'number'" nzSize="small" type="number"
                       [(ngModel)]="properties[prop.name]"
                       (change)="onPropertyChange(prop.name)">
                <input nz-input *ngSwitchCase="'text'" nzSize="small"
                       [(ngModel)]="properties[prop.name]"
                       (change)="onPropertyChange(prop.name)">
                <ng-container *ngSwitchCase="'color'">
                  <input nz-input nzSize="small" [value]="properties[prop.name]" [(colorPicker)]="properties[prop.name]"
                         [style.background]="properties[prop.name]"
                         (colorPickerChange)="onPropertyChange(prop.name)">
                  <a (click)="properties[prop.name]='none'; onPropertyChange(prop.name)"
                     *ngIf="properties[prop.name]!='none'">无</a>
                </ng-container>
                <nz-select *ngSwitchCase="'font'" nzSize="small"
                           [(ngModel)]="properties[prop.name]"
                           (ngModelChange)="onPropertyChange(prop.name)">
                  <nz-option nzLabel="默认" nzValue=""></nz-option>
                  <nz-option nzLabel="黑体" nzValue="黑体"></nz-option>
                  <nz-option nzLabel="宋体" nzValue="宋体"></nz-option>
                </nz-select>
                <nz-select *ngSwitchCase="'fontsize'" nzSize="small"
                           [(ngModel)]="properties[prop.name]"
                           (ngModelChange)="onPropertyChange(prop.name)">
                  <nz-option nzLabel="最小" nzValue="xx-small"></nz-option>
                  <nz-option nzLabel="较小" nzValue="x-small"></nz-option>
                  <nz-option nzLabel="小号" nzValue="small"></nz-option>
                  <nz-option nzLabel="中号" nzValue="medium"></nz-option>
                  <nz-option nzLabel="大号" nzValue="large"></nz-option>
                  <nz-option nzLabel="较大" nzValue="x-large"></nz-option>
                  <nz-option nzLabel="超大" nzValue="xx-large"></nz-option>
                  <nz-option nzLabel="最大" nzValue="xxx-large"></nz-option>
                </nz-select>
                <nz-select *ngSwitchCase="'select'" nzSize="small"
                           [(ngModel)]="properties[prop.name]"
                           (ngModelChange)="onPropertyChange(prop.name)">
                  <nz-option *ngFor="let opt of prop?.options" [nzLabel]="opt.label" [nzValue]="opt.value"></nz-option>
                </nz-select>
                <ng-container *ngSwitchCase="'attachment'">
                  <input nz-input nzSize="small" [(ngModel)]="properties[prop.name]"
                         (change)="onPropertyChange(prop.name)">
                  <a (click)="browserAttachment(prop.name)">附件</a>
                </ng-container>
                <input nz-input *ngSwitchDefault nzSize="small"
                       [(ngModel)]="properties[prop.name]"
                       (change)="onPropertyChange(prop.name)">
                <!--            {{data.name}}-->

              </td>
            </tr>
            </tbody>
          </table>

        </nz-collapse-panel>
        <nz-collapse-panel nzHeader="事件响应" nzActive>

          <ng-container *ngFor="let event of current?.$component?.events">
            <div class="handler">
              <div>
                {{event.label}}
                <i nz-icon nzType="plus-circle" (click)="bindEvent(event)"></i>
              </div>
              <div class="invoke" *ngFor="let handler of current?.handlers[event.name]; let i=index">
                <i nz-icon class="remove" nzType="close" (click)="current?.handlers[event.name].splice(i,1)"></i>
                <table>
                  <tr>
                    <td>目标</td>
                    <td>
                      <nz-select nzAllowClear nzMode="tags" [nzTokenSeparators]="[',', '，', ';', ' ']"
                                 nzSize="small" [(ngModel)]="handler.targets"></nz-select>
                    </td>
                  </tr>
                  <tr>
                    <td>命令</td>
                    <td>
                      <input nz-input nzSize="small" [(ngModel)]="handler.command"/>
                    </td>
                  </tr>
                  <tr>
                    <td>参数</td>
                    <td>
                      <nz-select nzAllowClear nzMode="tags" [nzTokenSeparators]="[',']"
                                 nzSize="small" [(ngModel)]="handler.arguments"></nz-select>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </ng-container>

        </nz-collapse-panel>
        <nz-collapse-panel nzHeader="数据绑定" nzActive>

          <table>
            <tbody>
            <tr *ngFor="let value of current?.$component?.values">
              <td>{{value.label}}</td>
              <td><input nz-input nzSize="small" [(ngModel)]="current?.bindings[value.name]"></td>
            </tr>
            </tbody>
          </table>

        </nz-collapse-panel>
      </nz-collapse>


    </nz-sider>
  </nz-layout>
  <nz-footer>

    <input class="size" nz-input nzSize="small" [(ngModel)]="width" (change)="onSizeChange()">
    x
    <input class="size" nz-input nzSize="small" [(ngModel)]="height" (change)="onSizeChange()">

    <a nz-dropdown [nzDropdownMenu]="sizeMenu">
      常用尺寸
      <i nz-icon nzType="down"></i>
    </a>
    <nz-dropdown-menu #sizeMenu="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li nz-menu-item (click)="changeSize(400,300)">400x300</li>
        <li nz-menu-item (click)="changeSize(600,400)">600x400</li>
        <li nz-menu-item (click)="changeSize(800,600)">800x600</li>
        <li nz-menu-item (click)="changeSize(1000,800)">1000x800</li>
        <li nz-menu-item (click)="changeSize(1200,900)">1200x900</li>
        <li nz-menu-item (click)="changeSize(1600,1200)">1600x1200</li>
        <li nz-menu-item (click)="changeSize(2000,1600)">2000x1600</li>
      </ul>
    </nz-dropdown-menu>

    <nz-divider nzType="vertical"></nz-divider>

    <nz-select [(ngModel)]="scale" (ngModelChange)="onScaleChange()">
      <nz-option nzLabel="10%" [nzValue]="0.1"></nz-option>
      <nz-option nzLabel="50%" [nzValue]="0.5"></nz-option>
      <nz-option nzLabel="100%" [nzValue]="1"></nz-option>
      <nz-option nzLabel="200%" [nzValue]="2"></nz-option>
    </nz-select>

    <nz-divider nzType="vertical"></nz-divider>

    填充
    <input class="color" [(colorPicker)]="fill" [style.background]="fill"/>
    <a (click)="fill='none'" *ngIf="fill!='none'">无</a>

    <nz-divider nzType="vertical"></nz-divider>
    边框
    <nz-select [(ngModel)]="stroke" nzSize="small">
      <nz-option [nzValue]="0" nzLabel="无"></nz-option>
      <nz-option [nzValue]="1" nzLabel="1"></nz-option>
      <nz-option [nzValue]="2" nzLabel="2"></nz-option>
      <nz-option [nzValue]="3" nzLabel="3"></nz-option>
      <nz-option [nzValue]="4" nzLabel="4"></nz-option>
      <nz-option [nzValue]="5" nzLabel="5"></nz-option>
    </nz-select>
    <ng-container *ngIf="stroke > 0">
      <input class="color" [(colorPicker)]="color" [style.background]="color"/>
      <a (click)="color='none'" *ngIf="color!='none'">无</a>
    </ng-container>
  </nz-footer>
</nz-layout>
